<template>
	<view @click="navigate('/page_market/work/detail?id='+detail.id)" class="work-item-com">
		<view class="head-info">
			<view class="work-type">{{valuationText.name}}</view>
			<view class="work-name">{{detail.name}}</view>
			<view class="price">{{detail.price}}<text class="unit">{{valuationText.unit}}</text></view>
		</view>
		<view class="info-item">开工日期：{{detail.startTime}}</view>
		<text class="info-item" space="nbsp"
			decode="true">{{detail.distance_calc}}&nbsp;&nbsp;|&nbsp;&nbsp;{{detail.address}}</text>
		<view class="com-block">
			<image class="com-logo" :src="detail.department.logo"></image>
			<view class="com-name">{{detail.department?detail.department.name:''}}</view>
			<view v-if="detail.processstatus==2&&isEmployed==2" style="color: red;" class="status-text">未被录用</view>
			<view v-else class="status-text">{{detail.processStatusText||''}}</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'WorkItem',
		data() {
			return {}
		},
		props: {
			detail: {
				type: Object,
				default: () => {
					return {
						valuation: 1,
						name: '',
						start_time_text: '',
						distance: '',
						address: '',
						price_text: '',
						price: '',
						department: {
							logo: '',
							name: ''
						}
					}
				}
			},
			is_employed: {

			}
		},
		computed: {
			valuationText() {
				let obj = {}
				switch (this.detail.valuation) {
					case 1:
						obj = {
							name: '短期工',
							unit: '元/天'
						};
						break;
					case 2:
						obj = {
							name: '小时工',
							unit: '元/时'
						};
						break;
					case 3:
						obj = {
							name: '计件工',
							unit: '元/100件'
						};
						break;
					default:
						obj = {
							name: '短期工',
							unit: '元/天'
						};
				}
				return obj
			},
		}
	}
</script>

<style lang="scss" scoped>
	.work-item-com {
		width: 100%;
		background: #fff;
		border-radius: 12px;
		padding: 0 30rpx;
		overflow: hidden;
		margin-bottom: 30rpx;

		.head-info {
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.work-type {
				width: 100rpx;
				border-radius: 4px;
				color: #007AFF;
				background: #D5E0FA;
				font-size: 24rpx;
				padding: 2px 7px;
				margin-right: 20rpx;
				text-align: center;
			}

			.work-name {
				width: calc(100% - 295rpx);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-right: auto;
			}

			.price {
				width: 175rpx;
				font-weight: bold;
				font-size: 34rpx;
				text-align: right;
				color: $orange-color;

				.unit {
					font-weight: normal;
					font-size: 24rpx;
				}
			}
		}

		.info-item {
			display: block;
			margin-top: 30rpx;
			font-size: 26rpx;
			color: #767676;
		}

		.com-block {
			margin-top: 20rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			border-top: 1px solid #ededed;

			.com-logo {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.com-name {
				width: calc(100% - 200rpx);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 28rpx;
			}

			.status-text {
				font-size: 28rpx;
				color: $orange-color;
				width: 120rpx;
				text-align: right;
			}
		}
	}
</style>